import { MaterialIcons } from "@expo/vector-icons";
import { useState } from "react";
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import RatioIcon from "./RatioIcon";

// 裁剪工具项
interface EditTool {
  key: string;
  label: string;
  ratio?: number;
  icon?: React.ReactNode;
}

// 裁剪工具列表
const EDIT_TOOLS: EditTool[] = [
    {
    key: "crop",
    label: "自由",
    icon: <MaterialIcons name="crop-free" size={20} />,
  },
  {
    key: "original",
    label: "原始",
    icon: <MaterialIcons name="restore" size={20} />,
  },
  { key: "1_1", label: "1:1", ratio: 1 },
  { key: "4_3", label: "4:3", ratio: 4 / 3 },
  { key: "3_4", label: "3:4", ratio: 3 / 4 },
  { key: "2_3", label: "2:3", ratio: 2 / 3 },
  { key: "3_2", label: "3:2", ratio: 3 / 2 },
  { key: "16_9", label: "16:9", ratio: 16 / 9 },
  { key: "9_16", label: "9:16", ratio: 9 / 16 },
];

interface CropEditorProps {
  onToolSelect?: (toolKey: string) => void;
}

export default function CropEditor({ onToolSelect }: CropEditorProps) {
  const [selectedTool, setSelectedTool] = useState<string>("crop");
  return (
    <View style={styles.container}>
      {/* 裁剪工具栏 */}
      <FlatList
        data={EDIT_TOOLS}
        horizontal
        showsHorizontalScrollIndicator={false}
        keyExtractor={(item) => item.key}
        renderItem={({ item }) => {
          const isSelected = selectedTool === item.key;
          const iconColor = isSelected ? "#ff7a45" : "#222";
          return (
            <TouchableOpacity
              style={styles.editToolBtn}
              onPress={() => {
                setSelectedTool(item.key);
                onToolSelect?.(item.key);
              }}
            >
              <View style={styles.cropping}>
                {item.key === "original" ? (
                  <MaterialIcons name="crop-original" size={22} color={iconColor} />
                ) : item.key === "crop" ? (
                  <MaterialIcons name="crop-free" size={22} color={iconColor} />
                ) : (
                  <RatioIcon ratio={item.ratio!} color={iconColor} />
                )}
              </View>
              <Text style={[ styles.editToolLabel, isSelected && styles.selectedEditToolLabel ]}>
                {item.label}
              </Text>
            </TouchableOpacity>
          );
        }}
        contentContainerStyle={{ paddingHorizontal: 10 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 20, // 根据内容自然撑开高度
  },
  editToolBtn: {
    alignItems: "center",
    justifyContent: "center",
    marginHorizontal: 20,
  },
  cropping: {
    height: 30,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  editToolLabel: {
    fontSize: 10,
    color: "#222",
    marginTop: 4,
  },
  selectedEditToolLabel: {
    color: "#ff7a45",
  },
});
